<template>
  <div style="padding: 12px 24px">
    <div
      style="display: flex; justify-content: space-between; align-items: center"
    >
      <div style="display: flex; align-items: center; gap: 0px 12px">
        <div style="font-size: 18px; color: #222b3c; font-weight: 500">
          新增联动校验条件
        </div>
        <div
          style="
            width: 1px;
            height: 12px;
            background: #dedfe3;
            border-radius: 1px;
          "
        ></div>
        <div style="font-weight: 400; font-size: 14px; color: #97999c">
          提示：且/或代表上一条件与下一个条件间的关系；按上下顺序进行校验
        </div>
      </div>
      <div>
        <svg class="icon" aria-hidden="true" @click="close">
          <use xlink:href="#icon-cuowu"></use>
        </svg>
      </div>
    </div>
    <div>
      <div
        style="
          display: flex;
          align-items: center;
          margin: 28px 63px;
          height: 54px;
          background: #feefe5;
          border-radius: 12px;
        "
      >
        <div style="width: 183px; margin-left: 20px">
          不满足校验条件时报错：
        </div>
        <div style="width: 72%; margin-right: 16px">
          <a-input
            placeholder="请输入"
            v-model="linkageInfoCheckAddDTO.errorMsg"
          >
          </a-input>
        </div>
        <a-checkbox
          v-model="linkageInfoCheckAddDTO.type"
          @change="!linkageInfoCheckAddDTO.type"
        >
          精准报错
        </a-checkbox>
        <a-popover placement="br">
          <template #title>
            <div style="width: 440px; height: 230px; padding: 10px 16px">
              <div
                style="
                  color: #646a73;
                  font-size: 14px;
                  font-weight: 400;
                  margin-bottom: 8px;
                "
              >
                精准报错示例
              </div>
              <div
                style="
                  width: 100%;
                  height: 74px;
                  padding: 12px;
                  background: #fef7f2;
                  border-radius: 6px;
                  border: 1px solid rgba(253, 177, 128, 0.8);
                "
              >
                <div style="color: #222b3c">
                  <svg
                    class="icon"
                    aria-hidden="true"
                    style="color: #fc8334; font-size: 14px; font-weight: 400"
                  >
                    <use xlink:href="#icon-tishi"></use>
                  </svg>
                  数据结果验证失败
                </div>
                <div style="padding-left: 10px">
                  「姓名」数据结果为「有值」时，展示字段「手机号码」
                </div>
              </div>
              <div
                style="
                  color: #646a73;
                  font-size: 14px;
                  font-weight: 400;
                  margin-top: 20px;
                  margin-bottom: 8px;
                "
              >
                默认报错示例
              </div>
              <div
                style="
                  width: 100%;
                  height: 74px;
                  padding: 12px;
                  background: #fef7f2;
                  border-radius: 6px;
                  border: 1px solid rgba(253, 177, 128, 0.8);
                "
              >
                <div style="color: #222b3c">
                  <svg
                    class="icon"
                    aria-hidden="true"
                    style="color: #fc8334; font-size: 14px; font-weight: 400"
                  >
                    <use xlink:href="#icon-tishi"></use>
                  </svg>
                  数据结果验证失败
                </div>
              </div>
            </div>
          </template>
          <div>
            <svg
              class="icon"
              aria-hidden="true"
              style="color: #97999c; font-size: 14px; font-weight: 400"
            >
              <use xlink:href="#icon-jieshishuoming"></use>
            </svg>
          </div>
        </a-popover>
      </div>
      <div></div>
    </div>

    <div
      style="
        width: 120px;
        display: flex;
        align-items: center;
        margin-left: 94px;
      "
      @click="
        () => {
          linkageInfoCheckAddDTO.infoCheckGroupAddDTOList.push({
            infoCheckAddDTOList: [
              {
                infoCheckAddDTO: {
                  checkRule: 'result',
                  filterTypeShow: false,
                  conditionDTO: [{}],
                },
              },
            ],
            relation: false,
          });
        }
      "
    >
      <div>
        <svg
          class="icon"
          aria-hidden="true"
          style="color: #2983ff; font-size: 14px; font-weight: 400"
        >
          <use xlink:href="#icon-zengjia"></use>
        </svg>
      </div>
      <div>
        <a-button type="link" style="padding: 0px 3px"> 添加条件组 </a-button>
      </div>
    </div>
    <div class="scroll-container" style="height: 430px">
      <div
        v-for="(
          infoCheckGroupAddDTOList, infoCheckGroupAddDTOListIndex
        ) in linkageInfoCheckAddDTO.infoCheckGroupAddDTOList"
        :key="infoCheckGroupAddDTOListIndex"
        style="
          display: flex;
          position: relative;
          margin-left: 95px;
          padding: 8px 0px;
        "
      >
        <div
          v-if="
            linkageInfoCheckAddDTO.infoCheckGroupAddDTOList.length - 1 !==
            infoCheckGroupAddDTOListIndex
          "
          ref="divsConnect"
          @click="
            () => {
              infoCheckGroupAddDTOList.relation
                ? $set(infoCheckGroupAddDTOList, 'relation', false)
                : $set(infoCheckGroupAddDTOList, 'relation', true);
            }
          "
          style="cursor: pointer; height: 89px"
          class="custom-div displayFlex"
        >
          <div class="child-div" style="left: -12px">
            或
            <!-- {{ infoCheckGroupAddDTOList.relation?'且':'或' }}
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-sanjiao"></use>
            </svg> -->
          </div>
        </div>
        <div
          ref="divs"
          style="background: #fafbfd; border-radius: 8px; padding: 16px 0px"
        >
          <div
            class="displayFlex"
            v-for="(
              infoCheckAddDTOList, infoCheckAddDTOListIndex
            ) in infoCheckGroupAddDTOList.infoCheckAddDTOList"
            :key="infoCheckAddDTOListIndex"
            style="
              margin: 0px 10px 0px 70px;
              justify-content: flex-start;
              position: relative;
            "
          >
            <div
              v-if="
                infoCheckGroupAddDTOList.infoCheckAddDTOList.length - 1 !==
                infoCheckAddDTOListIndex
              "
              @click="
                () => {
                  infoCheckAddDTOList.relation
                    ? $set(infoCheckAddDTOList, 'relation', false)
                    : $set(infoCheckAddDTOList, 'relation', true);
                }
              "
              style="cursor: pointer; height: 41px"
              class="custom-div displayFlex"
            >
              <div class="child-div">
                {{ infoCheckAddDTOList.relation ? "且" : "或" }}
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-sanjiao"></use>
                </svg>
              </div>
            </div>
            <a-popover
              trigger="click"
              v-model:popup-visible="
                infoCheckAddDTOList.infoCheckAddDTO.filterTypeShow
              "
            >
              <div
                @click="
                  infoCheckAddDTOList.infoCheckAddDTO.filterTypeShow = true
                "
                style="
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  justify-content: center;
                  width: 130px;
                  height: 32px;
                  background: #e8f2ff;
                  border-radius: 16px;
                  border: 1px solid #d8e8fd;
                  margin-right: 20px;
                "
              >
                <!-- 数据格式(邮件) -->
                <div
                  v-text="
                    infoCheckAddDTOList.infoCheckAddDTO.checkRule
                      ? menuList.find(
                          (item) =>
                            infoCheckAddDTOList.infoCheckAddDTO.checkRule ===
                            item.checkRule
                        ).title
                      : menuList[0]?.title
                  "
                ></div>
                <svg class="icon" style="margin-left: 3px" aria-hidden="true">
                  <use xlink:href="#icon-shaixuan"></use>
                </svg>
              </div>
              <template #content style="padding: 0px">
                <div style="padding: 6px 0px">
                  <div
                    class="menuItem"
                    @click="
                      ((infoCheckAddDTOList.infoCheckAddDTO.filterTypeShow = false),
                      (infoCheckAddDTOList.infoCheckAddDTO.checkRule =
                        item.checkRule),
                      (infoCheckAddDTOList.infoCheckAddDTO.conditionDTO = [{}]))
                    "
                    v-for="(item, index) in menuList"
                    :key="index"
                  >
                    <div class="checkRule">{{ item.title }}</div>
                    <div
                      style="color: #a1a5ae; font-size: 12px; font-weight: 400"
                    >
                      {{ item.description }}
                    </div>
                  </div>
                </div>
              </template>
            </a-popover>
            <!-- <condition :checkRule="checkRule"/> -->
            <condition
              :checkRule="infoCheckAddDTOList.infoCheckAddDTO.checkRule"
              :isLinkage="true"
              :conditionDTO="infoCheckAddDTOList.infoCheckAddDTO.conditionDTO"
            />
            <div
              style="
                width: 60px;
                margin-left: 10px;
                display: flex;
                justify-content: space-between;
                align-items: center;
              "
            >
              <a-button
                type="text"
                size="mini"
                class="delIcon"
                @click="
                  () => {
                    infoCheckGroupAddDTOList.infoCheckAddDTOList.length === 1
                      ? linkageInfoCheckAddDTO.infoCheckGroupAddDTOList.splice(
                          infoCheckGroupAddDTOListIndex,
                          1
                        )
                      : infoCheckGroupAddDTOList.infoCheckAddDTOList.splice(
                          infoCheckAddDTOListIndex,
                          1
                        );
                  }
                "
                >删</a-button
              >
              <a-button
                type="text"
                size="mini"
                class="addIcon"
                @click="
                  () => {
                    infoCheckGroupAddDTOList.infoCheckAddDTOList.splice(
                      infoCheckAddDTOListIndex + 1,
                      0,
                      {
                        infoCheckAddDTO: {
                          checkRule: 'result',
                          filterTypeShow: false,
                          conditionDTO: [{}],
                        },
                        relation: false,
                      }
                    );
                  }
                "
                >加</a-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <div style="display: flex; justify-content: center; gap: 0px 8px">
      <a-button
        @click="
          () => {
            ((linkageInfoCheckAddDTO.infoCheckGroupAddDTOList = []),
              (linkageInfoCheckAddDTO.errorMsg = ''),
              (linkageInfoCheckAddDTO.type = false));
          }
        "
        >重置</a-button
      >
      <a-button @click="close">取消</a-button>
      <a-button type="primary" @click="save"> 确定 </a-button>
    </div>
  </div>
</template>

<script>
// import { nanoid } from 'nanoid'
import condition from "@/components/Form/verification/condition.vue";
import { menuList } from "@/components/Form/base/options";

// checkRule checkRule
export default {
  name: "VerificationListAddLinkage",
  components: {
    condition,
  },
  inject: ["dataObj"],
  props: {
    linkageInfoCheckAddDTO: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      // relation: false,
      visible: false,
      filterTypeShow: false,
      menuList: menuList,
      divHeights: [],
      labelCol: { span: 8 },
      wrapperCol: { span: 16 },
    };
  },
  // columnStyle
  mounted() {
    this.observeHeights();
  },
  methods: {
    save() {
      console.log(this.linkageInfoCheckAddDTO, "linkageInfoCheckAddDTO");
      this.$emit("ok", { LinkageOk: this.linkageInfoCheckAddDTO });
    },
    close() {
      this.$emit("close", { Linkageclose: this.linkageInfoCheckAddDTO });
    },
    async observeHeights() {
      await this.$nextTick();
      const divs = this.$refs.divs;
      const divsConnect = this.$refs.divsConnect;
      // 先初始化高度数组
      this.divHeights = divs.map(() => 0);
      const observer = new ResizeObserver((entries) => {
        entries.forEach((entry) => {
          const targetDiv = entry.target;
          const index = divs.indexOf(targetDiv); // 找到当前 div 在 divs 数组中的索引
          const height = entry.contentRect.height;
          this.$set(this.divHeights, index, height); // 更新对应 div 的高度
          // 更新 divsConnect 的高度（注意 index - 1 需要判断是否存在）
          if (index > 0) {
            const newHeight =
              this.divHeights[index - 1] / 2 + 48 + this.divHeights[index] / 2;
            divsConnect[index - 1].style.height = `${newHeight}px`; // 设置 divsConnect 的新高度
          }
        });
      });
      divs.forEach((div, index) => {
        observer.observe(div); // 观察每一个 div 元素
      });
    },
  },
  watch: {
    linkageInfoCheckAddDTO: {
      handler(value) {
        this.observeHeights();
      },
      deep: true,
    },
  },
};
</script>

<style lang="less" scoped>
.addButton {
  width: 70px;
  height: 30px;
  cursor: pointer;
  background: #ffffff;
  border-radius: 15px;
  border: 1px solid #2983ff;
  display: flex;
  align-content: center;
  justify-content: space-evenly;
}

.conditionList {
  display: flex;
  align-content: center;
  // justify-content: space-evenly;
  width: 100%;
  flex-wrap: wrap;
  height: 30px;
  padding: 0px 77px;
  background: #f7f8fa;
  border-radius: 6px;
}

.conditionGroup {
  background: #fafbfd;
  border-radius: 8px;
  padding: 8px;
  margin: 14px 0px;
  font-size: 14px;
  font-weight: 400;
  color: #222b3c;
}

/deep/ .custom-select .arco-select-view {
  border-radius: 16px !important; /* 设置圆角半径 */
  background: #f1f7ff !important;
  border: 1px solid #d8e8fd !important;
}

/deep/ .custom-select .arco-select-view:hover {
  background: #ffffff !important;
  border: 1px solid #1890ff !important;
}

.custom-div {
  top: 50%; /* 垂直居中 */
  left: -45px; /* 左边线 */
  border-left: 1px solid #bfbfbf; /* 左侧边框 */
  border-top: 1px solid #bfbfbf; /* 上侧边框 */
  border-bottom: 1px solid #bfbfbf; /* 下侧边框 */
  border-top-left-radius: 15px; /* 左上角圆角 */
  border-bottom-left-radius: 15px; /* 左下角圆角 */
  width: 30px;
  margin: 0px 0px 0px 16px;
  position: absolute; /* 设置父元素为相对定位，使子元素可以绝对定位 */
}

.child-div {
  // width:25px;
  // height:25px;
  line-height: 13px;
  position: absolute; /* 绝对定位 */
  top: 50%; /* 垂直居中 */
  left: -22px; /* 左边线 */
  transform: translateY(-50%); /* 垂直居中调整 */
  padding: 3px; /* 子元素内边距 */
  background-color: #ffffff; /* 子元素背景色 */
  border: 1px solid #bfbfbf;
  border-radius: 7px;
  font-weight: 500;
  // cursor: pointer;
}

.drag-handle {
  display: flex;
  align-content: left;
  align-items: center;
  margin-right: 4px;
}

.icon {
  font-size: 12px;
  color: #646a73;
  cursor: pointer;
}

.icon:hover {
  color: #2983ff; /* 悬停后的颜色 */
}

.delIcon {
  line-height: 34px;
  cursor: pointer;
  color: #97999c;
  font-size: 12px;
}

.delIcon:hover {
  color: red; /* 悬停后的颜色 */
}

.addIcon {
  line-height: 33px;
  cursor: pointer;
  color: #97999c;
  font-size: 12px;
}

.addIcon:hover {
  color: #2983ff; /* 悬停后的颜色 */
}

.switch {
  display: flex;
  width: 88px;
  border-radius: 16px;
  background: #f0f2f5;
  cursor: pointer;
}

.switchLeft {
  width: 44px;
  height: 26px;
  border-radius: 16px;
  background: #ffffff;
  margin: 2px 0px 2px 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.switchRight {
  width: 44px;
  height: 26px;
  border-radius: 16px;
  margin: 2px 2px 2px 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/deep/ .arco-drawer {
  border-radius: 16px 16px 0px 0px;
}

/deep/ .arco-drawer-body {
  padding: 0px;
}

.displayFlex {
  display: flex;
  align-items: center;
  justify-content: center;
}

.menuItem {
  padding: 4px;
  border-radius: 6px;
  cursor: pointer;
}

.checkRule {
  color: #222b3c;
  font-size: 14px;
  font-weight: 400;
}

.menuItem:hover {
  background: #f1f7ff;
}

.menuItem:hover .checkRule {
  color: #2983ff; /* 鼠标悬停时改变描述文字颜色 */
}

.scroll-container {
  overflow-x: auto; /* 禁用横向滚动条 */
  overflow-y: auto; /* 允许纵向滚动条 */
  // overflow-x: hidden;  /* 禁用横向滚动条 */
}

.scroll-container::-webkit-scrollbar {
  width: 8px; /* 定义滚动条宽度 */
  height: 8px; /* 定义横向滚动条高度 */
}

.scroll-container::-webkit-scrollbar-thumb {
  background: #bcbdbe; /* 滚动条颜色，可调整 */
  border-radius: 999px; /* 滚动条圆角 */
}

.scroll-container::-webkit-scrollbar-track {
  display: none; /* 隐藏滚动槽 */
}

/deep/ .arco-popover-title {
  border-bottom: none;
}

/deep/ .arco-popover-content {
  display: none !important;
}
</style>
